<style>
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
}
 
.k-grid table {
    table-layout: fixed;
}

</style>
<script type="text/javascript" src="/js/app/invest.js"></script>
<script type="text/javascript" src="/js/app/transaction.js"></script>
<script>
    var dataSourceAjax = null;
    var grid = null;
    var gridTransaction = null;
    var tabs = null;
    var statusKendo = null;    
    var windowTransaction = null;
    
    $(document).ready(function() {
        $("#_status").kendoComboBox();
        $("#status").kendoComboBox();
        $("#_isFinished").kendoComboBox();
        
        statusKendo = $("#status").data("kendoComboBox");                
        tabs = $("#tabstrip").kendoTabStrip();
        
        $("#deposit").kendoNumericTextBox({
            format: "c",
            decimals: 2
        });
        
        $("#profitDaily").kendoNumericTextBox({
            format: "#.#\\%",
            min: 0,
            step:0.1,
            decimals:1
        });

        $("#planWithdraw").kendoNumericTextBox({
            format: "c",
            decimals: 2
        });
    
        $("#withdraw").kendoNumericTextBox({
            format: "c",
            decimals: 2,
            change: function(e) {
                var fee = e.sender.value() / 100;
                if(fee % 0.01 > 0) fee += 0.01;
                if(fee > 2.99) fee = 2.99;
                $("#fee").data("kendoNumericTextBox").value(fee);
            }
        });
        
        $("#fee").kendoNumericTextBox({
            format: "c",
            decimals: 2,
            step:0.01,
        });
        
        $("#duration").kendoNumericTextBox({
            format: "# days"
        });

         $("#investedDate").kendoDateTimePicker({
            value: new Date(),
            format: "dd/MM/yyyy HH:mm"
           });
        
         $("#transactionDate").kendoDateTimePicker({
            value: new Date(),
            format: "dd/MM/yyyy HH:mm"
           });
        
        $("#domain").kendoComboBox({
            index: 0,
            placeholder: "Select domain",
            dataTextField: "domain",
            dataValueField: "id",
            filter: "contains",
            dataSource: {
                transport: {
                    read: {
                        url: "/hyip/getInvestDomain",
                        dataType: "json"
                    }
                }
            }
        });

        grid = new Invest.Grid("grid");   
        gridTransaction = new Transaction.Grid("gridTransaction");
        
        windowTransaction = $("#windowTransaction");

        if (!windowTransaction.data("kendoWindow")) {
            windowTransaction.kendoWindow({
                width: 600,
                maxHeight: 500,
                title: "Transactions",                
                close: function() {
                    
                },
                refresh : function()
                {
                    
                }
            });
        }
    });
    
    function btnSearchClick()
    {
        grid.refresh();
    }
    
    function btnCreateClick()
    {
    	Invest.create();
    }
    
</script>

<div id="tabstrip">
	<ul>
		<li class="k-state-active">
			Search
		</li>
		<li>
			Create
		</li>
                <li>
			Transactions
		</li>
	</ul>
	<div id="frmSearch" class="form" style="width:700px;">
		<dl>         
		    <dt class="first"><label for="_domain">Domain: </label></dt>
		    <dd class="first"><input type="text" id="_domain" /></dd>
		             
		    <dt class="second">Status: </dt>
		    <dd class="second">
		        <select id="_status">
                            <option value="">All</option>
		            <option>New</option>
                            <option>Paying</option>
                            <option>Monitor</option>
		            <option selected="selected">Invest</option>
                            <option>Invested</option>
		            <option>Scam</option>
		        </select>
		    </dd>
                    <dt class="first"><label for="_isFinished">Is Finished</label></dt>
		    <dd class="first">
                        <select id="_isFinished">
                            <option value="">All</option>
		            <option value="0" selected="selected">Not finished</option>
                            <option value="1">Finished</option>                            
		        </select>
                    </dd>
		</dl>
	    <div style="text-align:center;">
	        <button class="k-button long" onclick="btnSearchClick();">Search</button>
	    </div>
	</div>   
	<div style="width:700px;">
        <dl>         
            <dt class="first"><label for="domain">Domain: </label></dt>
            <dd class="first"><input type="text" id="domain" /></dd>
            
            <dt class="second"><label for="deposit">Deposit: </label></dt>
            <dd class="second"><input type="number" id="deposit" min="0" /></dd>
            
            <dt class="first"><label for="profitDaily">Profit daily: </label></dt>
            <dd class="first"><input type="number" id="profitDaily" min="0" /></dd>
            
            <dt class="second"><label for="duration">Duration: </label></dt>
            <dd class="second"><input type="number" id="duration" min="0" /></dd>
            
            <dt class="first"><label for="planWithdraw">Plan withdraw: </label></dt>
            <dd class="first"><input type="text" id="planWithdraw" min="0"/></dd>
            
            <dt class="second"><label for="investedDate">Invested date: </label></dt>
            <dd class="second"><input type="text" id="investedDate" style="width:170" /></dd>
        </dl>
    <div style="text-align:center; clear:both;">
        <button id="btnCreate" class="k-button long" onclick="btnCreateClick()">Create</button>
    </div>
	</div>    
    <div id="transactions" style="width:660">        
    <input type="hidden" id="investId" />
        <dl> 
            <dt><label for="withdraw">Withdraw: </label></dt>
            <dd><input type="text" id="withdraw" min="0" /></dd>
            <dt><label for="fee">Fee: </label><dt>
            <dd><input type="text" id="fee" min="0" /></dd>
            <dt><label for="transactionDate">Date: </label></dt>
            <dd><input type="text" id="transactionDate" style="width: 170px"/></dd>
            <dt>RCB</dt>
            <dd><input type="checkbox" id="isRCB" /></dd>
        </dl>                                
        <button onclick="Transaction.create();" class="k-button long">Create</button></td>        
        <div id="gridTransaction" style="width:610; height:250;"></div>
    </div>
</div>
<hr/>

<div id="grid"></div>
<div id="windowTransaction" style="display:none;"></div>